<template>
    <el-card class="box-card">
        <h2 class="title">系统菜单信息</h2>
        <el-form
                ref="menuFormRef"
                :rules="rules"
                :model="menuForm"
                label-width="80px"
        >
            <el-row>
                <el-col :span="colSize" :offset="offsetSize">
                    <el-input type="hidden" v-model="menuForm.id"></el-input>
                    <el-form-item label="菜单名称" prop="title">
                        <el-input v-model="menuForm.title"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="colSize" :offset="offsetSize">
                    <el-form-item label="父级菜单" prop="parentId">
                        <el-select
                                v-model="menuForm.parentId"
                                filterable
                                placeholder="请选择"
                        >
                            <el-option
                                    v-for="item in menuList"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="colSize" :offset="offsetSize">
                    <el-form-item label="路径名" prop="name">
                        <el-input v-model="menuForm.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="9" :offset="offsetSize">
                    <el-form-item label="菜单级别" prop="level">
                        <el-select v-model="menuForm.level" placeholder="请选择">
                            <el-option
                                    v-for="item in levelOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="是否隐藏" prop="hidden">
                        <el-select v-model="menuForm.hidden" placeholder="请选择">
                            <el-option
                                    v-for="item in hiddenOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="colSize" :offset="offsetSize">
                    <el-form-item label="icon图标" prop="icon">
                        <el-input v-model="menuForm.icon"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="handleType !== 'view'">
                <el-col :span="colSize" :offset="8">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提 交</el-button>
                        <el-button @click="onCancel">取 消</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="handleType === 'view'">
                <el-col :span="colSize" :offset="9">
                    <el-form-item>
                        <el-button type="primary" @click="onCancel">返 回</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</template>

<script>

    import {api_menuInfo, api_parentList, api_saveMenu} from "../../api/menu";

    export default {
        data() {
            return {
                handleType: 'add',
                colSize: 18,
                offsetSize: 3,
                menuForm: {
                    id: null,
                    name: null,
                    parentId: null,
                    title:null,
                    level:null,
                    icon:null,
                    hidden:null
                },
                rules: {
                    title: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
                    parentId: [{ required: true, message: '请选择父级菜单', trigger: 'blur' }],
                    name: [{ required: true, message: '请输入路径名', trigger: 'blur' }],
                    icon: [{ required: true, message: '请输入icon图标', trigger: 'blur' }],
                    level: [{ required: true, message: '请选择菜单级别', trigger: 'blur' }],
                    hidden: [{ required: true, message: '请选择是否隐藏', trigger: 'blur' }],
                },
                menuList: [
                    {
                        id: 0,
                        title: '无',
                    },
                ],
                levelOptions:[
                    {
                        id:1,
                        name:"1级",
                    },
                    {
                        id:2,
                        name:"2级",
                    }
                ],
                hiddenOptions:[
                    {
                        id:0,
                        name:"否",
                    },
                    {
                        id:1,
                        name:"是",
                    }
                ],
            }
        },
        created() {
            this.handleMenuList()
            this.getHandleType()
        },
        mounted() {
            this.getInfo()
        },
        methods: {
            async getInfo() {
                let id = this.$route.query.id
                if (id) {
                    const { data: res } = await api_menuInfo({
                        id: id,
                    })
                    this.menuForm = res.data
                }
            },
            getHandleType() {
                this.handleType = this.$route.query.handleType
            },
            async handleMenuList() {
                const { data: res } = await api_parentList()
                this.menuList = this.menuList.concat(res.data)
            },
            onSubmit() {
                this.$refs.menuFormRef.validate(async (valid) => {
                    if (!valid) {
                        return false
                    }
                    const { data: res } = await api_saveMenu(this.menuForm)
                    if (!res.success) {
                        this.$message.error(res.msg)
                        return
                    }
                    this.$message({
                        message: res.msg,
                        type: 'success',
                    })
                    await this.$router.push('/system/menuList')
                })
            },
            onCancel() {
                this.$router.push('/system/menuList')
            },
        },
    }
</script>

<style scoped>
    .box-card {
        width: 60%;
        margin: auto;
    }
    .title {
        text-align: center;
        margin-bottom: 40px;
        font-size: 40px;
    }
</style>
